<template>
  <ContentPageHeader title="STEP 01：生命周期建模" descText="请完善各阶段数据"></ContentPageHeader>
  <div class="c-page-layout__body__content" v-loading="loading">
    <div class="body-content__main">
      <ContentMainItem
        v-for="item in stageList"
        :key="item.lifeCycleStage"
        :item="item"
        @btnClick="handleOpenDrawer"
      />
    </div>
  </div>
  <ProductBomDrawer
    :title="processTitle"
    :subTitle="processSubTitle"
    :stage="processStage"
    :modelNo="modelNo"
    :modelDetail="modelDetail"
    v-model:visible="productBomVisible"
    v-if="productBomVisible"
  ></ProductBomDrawer>
  <ProcessDrawer
    :title="processTitle"
    :subTitle="processSubTitle"
    :stage="processStage"
    :modelNo="modelNo"
    :modelDetail="modelDetail"
    v-model:visible="processVisible"
    v-if="processVisible"
  ></ProcessDrawer>
</template>

<script lang="ts" setup name="StepOne">
import { inject, ref, watch } from 'vue';
import ContentPageHeader from '../ContentPageHeader/index.vue';
import ProductBomDrawer from './components/ProductBomDrawer/index.vue';
import ProcessDrawer from './components/ProcessDrawer/index.vue';
import ContentMainItem from './components/ContentMainItem/index.vue';
import {
  ProcessStageCodeEnum,
  ProcessStageDrawerTitleMap,
  ProcessStageMap
} from '@/constants/enum';
import { getModelProcessDetail } from '@/apis/pcf/myModel/modelDetail';
import type { StageListItem } from '@/apis/pcf/myModel/model/modelDetailModel';
import { MODEL_DETAIL_ROOT } from '../../types';
import type { ModelDetailRootProvider } from '../../types';

const { modelNo, modelDetail } = inject(MODEL_DETAIL_ROOT) as ModelDetailRootProvider;

const productBomVisible = ref(false);
const processVisible = ref(false);
const processTitle = ref();
const processSubTitle = ref();
const processStage = ref<keyof typeof ProcessStageCodeEnum>(ProcessStageCodeEnum.MANUFACTURE_STAGE);
/**
 * 打开抽屉
 */
function handleOpenDrawer(stage: keyof typeof ProcessStageCodeEnum) {
  processTitle.value = ProcessStageMap[stage];
  processSubTitle.value = ProcessStageDrawerTitleMap[stage];
  processStage.value = stage;
  switch (stage) {
    case ProcessStageCodeEnum.SUPPLY_CHAIN_STAGE:
      productBomVisible.value = true;
      break;
    default:
      processVisible.value = true;
      break;
  }
}
const loading = ref(false);
const stageList = ref<StageListItem[]>([]);
async function getData(lifeCycleStage?: keyof typeof ProcessStageCodeEnum) {
  try {
    loading.value = true;
    const res = await getModelProcessDetail(modelNo, lifeCycleStage);
    if (lifeCycleStage) {
      // NOTE 后端隐藏逻辑：如果传了lifeCycleStage，返回的是所有数据，但是仅对应阶段的项才有值
      const index = stageList.value?.findIndex(n => n.lifeCycleStage === lifeCycleStage);
      const resIndex = res.findIndex(n => n.lifeCycleStage === lifeCycleStage);
      if (index > -1 && resIndex > -1) {
        stageList.value[index] = res[resIndex];
      }
    } else {
      stageList.value = res;
    }
    loading.value = false;
  } catch (error) {
    console.log('error', error);
    loading.value = false;
  }
}

watch(
  () => processVisible.value,
  (visible, oldVisible) => {
    if (!visible && oldVisible && processStage.value) {
      getData(processStage.value);
    }
  }
);

watch(
  () => productBomVisible.value,
  (visible, oldVisible) => {
    if (!visible && oldVisible && processStage.value) {
      getData(processStage.value);
    }
  }
);

// function handleRefresh(lifeCycleStage: keyof typeof ProcessStageCodeEnum) {
//   getData(lifeCycleStage);
// }

getData();
</script>

<style lang="scss" scoped>
.c-page-layout__body__content {
  padding: 16px 20px 48px;
}
.body-content__main {
  padding: 16px;
  border-radius: 6px;
  background-color: #f3f7fb;
}
</style>
